import { Component, Input, OnInit, SimpleChange, ViewChild } from '@angular/core';
const defaultOption = [
  { name: 'xx', percent: '50%', count: 1 },
  { name: 'xx', percent: '50%', count: 2 },
  { name: 'xx', percent: '50%', count: 3 },
];

@Component({
  selector: 'app-column-chart-dyn',
  templateUrl: './column-chart-dyn.component.html',
  styleUrls: ['./column-chart-dyn.component.less']
})
export class ColumnChartDynComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

  @Input() datas = defaultOption;
  @Input() data = {
    xAxis: {
      label: "name",
      value: [
        { value: "xx", show: true },
        { value: "xx", show: true },
        { value: "xx", show: true }
      ],
    },
    yAxis: {
      label: "percent",
      value: [
        { value: "50%", show: true },
        { value: "50%", show: true },
        { value: "50%", show: true },
      ],
    },
    zAxis: {
      label: "count",
      value: [
        [1],
        [2],
        [3]
      ]
    }
  };
  @ViewChild('scroller') scroller;
  @ViewChild('parent') parent;
  @Input() width;
  @Input() height;
  timer: any;
  dataS = defaultOption;
  scrollData = [...this.dataS];


  ngOnChanges(changes: {
    [propKey: string]: SimpleChange
  }) {
    this.handleInput();
    this.scrollData = [...this.dataS];
    this.timer && clearInterval(this.timer);
    if (this.parent.nativeElement.clientHeight < (this.dataS.length * 32 + 20)) {
      this.scroller && (this.scroller.nativeElement.style.height = this.scrollData.length * 32 + 'px');
      this.scrollerFn();
    }
  }

  ngOnDestroy() {
    this.timer && clearInterval(this.timer)
  }

  handleInput() {
    this.dataS = [...defaultOption, ...this.datas];
    let xAxisData;
    let yAxisData;
    let zAxisData;
    if (this.data && this.data.xAxis && this.data.xAxis.value) {
      const showXIndex: number[] = [];
      const xAxisDataItem = this.data.xAxis.value.filter((item: any, index: number) => {
        if (item.show !== false) showXIndex.push(index);
        return item.show !== false;
      });

      xAxisData = xAxisDataItem.map(item => item.value);
      if (this.data && this.data.yAxis && this.data.yAxis.value) {
        const showyIndex: number[] = [];
        const yDataItem = this.data.yAxis.value.filter((item: any, index: number) => {
          if (item.show !== false) showyIndex.push(index);
          return item.show !== false;
        });
        yAxisData = yDataItem.map(item => item.value);
        if (this.data && this.data.zAxis && this.data.zAxis.value) {
          const showZIndex: number[] = [];
          zAxisData = this.data.zAxis.value.map((item: any, index: number) => {
            showZIndex.push(index);
            return item[0];
          });
        };
      }
    }
    this.dataS = [];
    xAxisData.forEach((item, i) => {
      this.dataS.push({
        name: item,
        percent: yAxisData[i],
        count: zAxisData[i]
      })
    });
  }

  scrollerFn() {
    const el = this.scroller.nativeElement;
    let times = 1;
    if (this.timer !== undefined) {
      clearInterval(this.timer);
    }
    this.timer = setInterval(() => {
      el.scrollTop++;
      const marginBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
      // 如果当前滚动到底10px,追加数据
      if (marginBottom < 10) {
        this.dataS.push(...this.scrollData);
        times++;
      }
      // 如果追加10次数以上，重新开始
      if (times > 10) {
        this.dataS = [...this.scrollData];
        el.scrollTop = 0;
        times = 1;
      }
    }, 180);
  }

}
